{extend name="public/base"}

{block name="title"}就行天下-约酒交友{/block}

{block name="style"}
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0" />
<link rel="stylesheet" href="__STATIC__/home/css/personal.css" />
{css href="__STATIC__/home/css/map.css"}
<style>
    .select_area {
        position: fixed;
        top: .5rem;
        left: 1rem;
        padding: 0 .7rem;
        background: #36a110;
        color: #fff;
        border-radius: 5px;
        z-index: 10000;
    }

    .amap-icon {
        z-index: 3;
    }
    .amap-icon img {
        width: 30px;
        height: 30px;
        border-radius: 100%;
        box-shadow: 0 3px 7px rgba(69, 68, 68, .35);
    }

    .amap-marker-label {
        top: 6px !important;
        left: 20px !important;
        box-sizing: border-box;
        border: 1px solid #e8e8e8;
        line-height: 15px;
        padding-left: 15px;
        padding-right: 10px;
        box-shadow: 0 3px 7px rgba(69, 68, 68, .35);
    }
</style>
{/block}

{block name="main"}
<div class="pageControl commodityDetail bg-f7">
    <div class="main-top"></div>
    <div class="msui_nav msui_navTop noBorder">
        <a class="msui_navTop-back" href="/"><i class="micon-back"></i></a>
        <h1 class="msui_navTop-title">约酒交友</h1>
        <a href="" class="msui_navTop-right msui_navTop-cnav"><i class="micon-cnav"></i></a>
    </div>
    <div class="msui_menu tab-fixed" style="z-index: 11;">
        <div class="msui_menu-mask">
            <ul class="msui_menu-bd js-menu">
                <li class="msui_menu-li" data-tab="0"><a class="msui_menu-list fs08 cl-6666" data-status="1" data-type="nearby" href="#hash2_" data-hash="#hash2_">附近活动</a></li>
                <li class="msui_menu-li" data-tab="1"><a class="msui_menu-list fs08 cl-6666" data-status="0" data-type="new" href="#hash1_" data-hash="#hash1_">最新活动</a></li>
                <li class="msui_menu-li" data-tab="2"><a class="msui_menu-list fs08 cl-6666" data-status="3" data-type="" href="#hash4_" data-hash="#hash4_">发起约酒</a></li>
                <!-- 用于动画的层 -->
                <div id="line" class="weui-baseline"></div>
            </ul>
        </div>
    </div>
    <div class="mtab_list1 mtop03">
        <div class="js-list">

        </div>
    </div>
</div>
<div id="show_map" class="weui-popup__container">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="main-top"></div>
        <div class="msui_nav msui_navTop">
            <h1 class="msui_navTop-title">选择活动地址</h1>
        </div>
        <div class="map_address fs065" style="top: 3rem;">定位中...</div>
        <div id="map" style="height: 100%;"></div>
        <a class="close-popup select_area" href="javascript:;" >确定</a>
    </div>
</div>
{/block}

{block name="javascript"}
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=79d3994d99486314dbfddc26b4445dd2&plugin=AMap.ToolBar"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script>
<script>
    SCOPE.obj = {
        action : 'friend',
        is_more : true,
        page : 1,
        url : '{:url("index")}',
        hash : '2',
        container : '.js-list',
        data : {
            type : 'nearby'
        }
    };

    function get_activity_info(_id) {
        $.closePopup();
        $.showLoading();
        $.ajax({
            type : 'GET',
            url : '{:url("activity/info")}',
            data : {
                id : _id,
                type : 'nearby'
            },
            dataType : 'json',
            success : function (msg) {
                $.hideLoading();
                if (msg.code == 200) {
                    $('#activity_info').html(msg.tpl);
                    $("#activity_info").popup();
                } else {
                    $.toptip(msg.msg);
                }
            }
        });
    }

    function get_nearby_activity(obj, map) {
        $.showLoading('获取列表数据。。。');
        $.ajax({
            type : 'GET',
            url : '{:url("get_nearby_activity")}',
            data : {
                lat : obj.center_present_lat,
                lng : obj.center_present_lng,
                type : 'nearby'
            },
            dataType : 'json',
            success : function (msg) {
                if (msg.code == 200) {
                    var _data = msg.data.list;
                    var _len = _data.length;
                    var lnglats = [];
                    for(var i = 0; i < _len; i++) {
                        lnglats.push([_data[i].lng, _data[i].lat]);
                    }

                    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
                    infoWindow.close();
                    for (var i = 0, marker; i < lnglats.length; i++) {
                        var marker = new AMap.Marker({
                            position: lnglats[i],
                            map: map,
                            icon: new AMap.Icon({
                                size: new AMap.Size(30, 30),  //图标大小
                                image: _data[i].image,
                                imageOffset: new AMap.Pixel(0, 0)
                            })
                        });

                        // 设置label标签
                        marker.setLabel({ //label默认蓝框白底左上角显示，样式className为：amap-marker-label
                            offset: new AMap.Pixel(20, 13),//修改label相对于maker的位置
                            content:_data[i].name
                        });

                        marker.content = '<p>'+_data[i].name+'</p>' +
                            '<p>发起人：'+_data[i].nickname+'</p>' +
                            '<p>活动地址：'+_data[i].address+'</p>' +
                            '<p class="map_p">' +
                            '<a href="javascript:;" data-id="'+_data[i].id+'" class="fs06 cl-c81 get_activity_info">查看详情</a><a class="weui-btn weui-btn_mini weui-btn_primary navigation" data-lat="'+_data[i].lat+'" data-lng="'+_data[i].lng+'">导航</a>' +
                            '</p>';
                        marker.on('click', markerClick);
//                        marker.emit('click', {target: marker});
                    }
                    function markerClick(e) {
                        infoWindow.setContent(e.target.content);
                        infoWindow.open(map, e.target.getPosition());
                    }
//                    map.setFitView();
                }

                setTimeout(function () {
                    console.log(123);
                    $.hideLoading();
                    $.loading_hide();
                }, 888);
            }
        });
    }
</script>
{/block}